﻿<template>
  <div class="app-container">
    <div class="chart-title with-back">
      <div class="chart-left">
        <div>终端采购单</div>
        <div class="backtrack">
          <el-button @click="comeBack">返回</el-button>
        </div>
      </div>
    </div>
    <div class="stock-form">
      <div class="stock-mess">
        <div class="stock-clump">
          <div class="stock-title">
            订单编号：{{ purchase.order_no }} <span class="callout">{{ orderStatus(purchase.status) }}</span>
          </div>
          <div class="stock-column">
            <div>
              <span>制单时间：</span>{{ purchase.orders_time }}
            </div>
            <div>
              <span>制单人：</span>{{ purchase.orders_nickname }}
            </div>
            <div>
              <span>下单时间：</span>{{ purchase.create_time }}
            </div>
            <div>
              <span>审核人：</span>{{ purchase.check_admin_nickname }}
            </div>
          </div>
        </div>
        <div class="stock-clump">
          <div class="stock-title">
            供货人信息
          </div>
          <div class="stock-column">
            <div>
              <span>供货人名称：</span>{{ purchase.supplier_name }}
            </div>
            <div>
              <span>联系人：</span>{{ purchase.supplier_linkman }}
            </div>
            <div>
              <span>联系电话：</span>{{ purchase.supplier_linkman_mobile }}
            </div>
            <div>
              <span>发货地址：</span>{{ purchase.supplier_address }}
            </div>
          </div>
        </div>
      </div>
      <el-table :key="tableKey"
                v-loading="listLoading"
                :data="list"
                element-loading-text="拼命加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(255,255,255,0.2)"
                border
                fit
                highlight-current-row
                :header-cell-style="{background:'#F2F1F6',color:'#8B94BE'}"
                style="width: 100%">
        <el-table-column fixed="left"
                         align="center"
                         :label="$t('table.id')"
                         width="65">
          <template slot-scope="scope">
            <span>{{
                scope.$index + 1
              }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('order.no')">
          <template slot-scope="scope">
            <span>{{ scope.row.order_no }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('terminal.name')">
          <template slot-scope="scope">
            <span>{{ scope.row.equipment_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('brand.name')">
          <template slot-scope="scope">
            <span>{{ scope.row.brand_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('sort.name')">
          <template slot-scope="scope">
            <span>{{ scope.row.category_name }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('terminal.attribute')">
          <template slot-scope="scope">
            <span>{{ scope.row.attribute }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('public.number')">
          <template slot-scope="scope">
            <span>{{ scope.row.number }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('public.price')">
          <template slot-scope="scope">
            <span>{{ scope.row.price }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('order.sumPrice')">
          <template slot-scope="scope">
            <span>{{ scope.row.sum_price }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('goods.linkman')">
          <template slot-scope="scope">
            <span>{{ scope.row.linkman }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('goods.linkmanMobile')">
          <template slot-scope="scope">
            <span>{{ scope.row.linkman_mobile }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('goods.address')">
          <template slot-scope="scope">
            <span>{{ scope.row.address }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('public.remark')">
          <template slot-scope="scope">
            <el-button type="primary">{{ $t('public.remark') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('public.remark')">
          <template slot-scope="scope">
            <el-button type="primary">{{ $t('table.processInformation') }}</el-button>
          </template>
        </el-table-column>
        <el-table-column align="center"
                         show-overflow-tooltip
                         :label="$t('table.logisticsInformation')">
          <template slot-scope="scope">
            <el-button type="primary"
                       @click="handleTransport(scope.row)"
                       :disabled="scope.row.status !== 2">{{ $t('table.logisticsInformation') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-footer">设备：{{ purchase.number }}台 &nbsp;&nbsp; 总计：{{ purchase.money }}</div>
    </div>
    <div class="table-banner"></div>
    <div class="stock-footer">
      <div class="remarks">
        <div>备注信息:</div>
        <div class="remarks-content">
          <el-input v-model="purchase.check_remark"
                    :readonly="purchase.status === 1? false : true"></el-input>
        </div>
      </div>
      <div class="operat-form">
        <button v-if="purchase.status === 1"
                @click="handleReview(5)"
                class="overrule">驳回</button>
        <button v-if="purchase.status === 1"
                @click="handleReview(2)"
                class="adopt">通过</button>
      </div>
    </div>
    <!-- 发货 -->
    <el-dialog :title="textMap[dialogStatus]"
               :visible.sync="dialogFormVisible">
      <el-form ref="dataForm"
               :rules="rules"
               :model="temp"
               label-position="right"
               label-width="30%"
               style="width: 400px margin-left:120px"
               size="small">
        <div class="pops">
          <div class="pops-normal">
            <el-form-item :label="$t('order.no_2') + ' :'"
                          prop="order_number">
              <el-input v-model="temp.order_number"
                        :readonly="dialogStatus !== 'send' ? true : false"></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div slot="footer"
           class="dialog-footer">
        <div>
        </div>
        <div>
          <el-button @click="dialogFormVisible = false">{{
              $t("table.cancel")
            }}</el-button>
          <el-button type="primary"
                     @click="transportData">{{ $t("table.confirm") }}</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      purchase: undefined,
      temp: {
        order_number: ""
      },
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "添加",
        review: "审核",
        read: "查看",
        send: "发货"
      },
      rules: {
        name: [{ required: true, message: "请上传商品主图", trigger: "change" }]
      },
      dialogFormVisible: false,
      pageSize: 20
    };
  },
  created() {
    this.purchase = JSON.parse(sessionStorage.getItem('stockMess'))
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      const data = {
        order_no: this.purchase.order_no
      };
      const path = {
        app: "equipment",
        api: "api_equipment_index_orderDetails",
        version: "1.0",
        type: 2,
        data: data
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    handleTransport(row) {
      this.temp = Object.assign({}, row);
      this.dialogStatus = "send";
      this.dialogFormVisible = true;
    },
    transportData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          const data = {
            request_order_no: this.temp.request_order_no,
            order_number: this.temp.order_number
          }
          const path = {
            app: "equipment",
            api: "api_equipment_index_orderSend",
            version: "1.0",
            data: data
          };
          console.log('JSON.stringify(path)', JSON.stringify(path))
          this.socketApi.sendSock(JSON.stringify(path), res => {
            if (res) {
              this.socketData(res);
            }
          });
        }
      });
    },
    // 通过/驳回
    handleReview(status) {
      if (status === 5 && !this.purchase.check_remark) {
        this.$message.error('驳回必须填写备注信息');
        return false
      } else if (this.purchase.check_remark && (this.purchase.check_remark.length < 2 || this.purchase.check_remark.length > 100)) {
        this.$message.error('备注信息字符数需不能小于2字符或大于100字符');
        return false
      }

      const path = {
        app: "equipment",
        api: "api_equipment_index_orderCheck",
        version: "1.0",
        data: {
          order_no: this.purchase.order_no,
          status: status,
          returnType: status

        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_equipment_index_orderDetails") {
            this.total = resj.count;
            this.list = resj.data;
            this.listLoading = false;
          } else if (resj.api === "api_equipment_index_orderCheck") {
            this.$notify({
              title: "成功",
              message: "审核成功",
              type: "success",
              duration: 2000
            });
            this.$router.push({
              path: '/terminal-data/purchase-order-management'
            })
            console.log('resj', resj)
          } else if (resj.api === "api_equipment_index_orderSend") {
            this.$notify({
              title: "成功",
              message: "发货成功",
              type: "success",
              duration: 2000
            });
            this.dialogFormVisible = false;
            this.getList();
            this.$set(this.purchase, 'status', 3)
          }
        }
      }
    },
    comeBack() {
      this.$router.push({ path: '/terminal-data/purchase-order-management' })
    }
  }
};
</script>
<style scoped>
.stock-form {
  padding: 16px;
  background-color: #ffffff;
}
.stock-clump {
  border-bottom: 1px solid #e0e0e0;
  margin-bottom: 24px;
}
.table-footer {
  text-align: right;
  padding: 16px;
}
.stock-footer {
  background-color: #ffffff;
  padding: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.remarks {
  flex: 1;
  display: flex;
  align-items: center;
}
.remarks-content {
  width: 60%;
  margin-left: 16px;
}
.callout {
  background: rgba(255, 255, 255, 1);
  border: 1px solid rgba(45, 103, 232, 1);
  border-radius: 4px;
  font-size: 12px;
  padding: 4px;
  color: #2d67e8;
}
</style>
